<template>
  <div>
    <g-tree :data="treeData" style="clear: both">
      <div slot-scope="node" class="node">
        <span>{{node.data.name}}</span>
        <div class="btnstatus">
          <div @click="edit(node.data)"><img src="@/assets/edit.png"> </div>
          <div @click="add(node.data)"><img src="@/assets/add.png"> </div>
          <div @click="del(node.data)"><img src="@/assets/del.png"> </div>
        </div>
      </div>
    </g-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showIndex: '',
        hh: 'hhhh',
        treeData: [{
          id: 1,
          name: 'haha',
          children: [{
            id: 2,
            name: 'heihe3i'
          }, {
            id: 3,
            name: 'heihei',
            children: [
              {
                id: 5,
                name: 'xixixi'
              }
            ]
          }, {
            id: 4,
            name: 'heihei'
          }]
        }],
        filter(item) {
          if (item.name !== 'haha') {
            return false
          } else {
            return true
          }
        }
      }
    },
    methods: {
      add(data) {
        data.expanded =false;
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        data.children.map(item =>
          item.expanded=true
        );
        data.children.push  ({name: new Date().valueOf(),expanded:true, parent:data});
      },
      del(data) {
        const parent = data.parent;
        const children = parent.children || parent;
        console.log(children,'父组件');
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },
      edit(data) {
        console.log(data,'编辑的节点数据');
      }
    }
  }
</script>
<style scoped>
.node{padding-left:20px;width:300px;;height:25px;line-height:25px;color:#404040;font-size:16px;}
.node .btnstatus{
  display:none;float:right;
}

.btnstatus div{
  float: left;
}
.btnstatus div img{
  width:20px;height:22px;line-height:25px;
}

.node:hover{background:#e8f2fc;
  color: #70a4d5;}
.node:hover .btnstatus{
  display:block;
}
</style>
